<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-select v-model="selectValue" clearable placeholder="请选择" style="width: 110px;">
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input
            style="width: 130px;margin-left: 10px;"
            placeholder="请输入内容"
            v-model="selectInput"
            clearable>
          </el-input>
          <el-button plain style="margin-left: 10px;" @click="select">搜索</el-button>
          <el-dialog title="搜索结果" :visible.sync="dialogTableVisible" width="800px">
            <el-table :data="myselect">
              <el-table-column width="150" property="id" label="菜品类型编号"></el-table-column>
              <el-table-column width="150" property="name" label="菜品类型名称"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button-group>
                    <el-button @click="handleEdit(scope.$index, scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
                    <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>
        </div>
      </el-col>
      <el-col :span="6" :offset="6">
        <div class="grid-content bg-purple">
          <el-button plain @click="addDish">添加</el-button>
          <el-dialog title="添加菜品类型" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="菜品类型名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveAddClassify">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <ClassifyTable></ClassifyTable>
    </el-row>
  </div>
</template>

<script>
    import {mapActions,mapState} from 'vuex'
    import ClassifyTable from "./ClassifyTable";
    import * as url from '../../../api/lypApi'
    export default {
        name: "DishesClassify",
        components:{
            ClassifyTable
        },
        data(){
            return{
                selectOptions: [
                    {
                        value: 'name',
                        label: '菜品类型名称'
                    }
                ],
                selectValue: '',
                selectInput:'',
                myselect:[],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                },
                formLabelWidth: '120px'
            }
        },
        methods:{
            ...mapState({
                classifyTableData:function (state) {
                    return state.lypStore.classify.classifyTableData
                }
            }),
            saveAddClassify(){
                this.dialogFormVisible = false
                this.$axios({
                    url:`/lypApi${url.ADDCLASSIFY}`,
                    method:'post',
                    data:this.form
                }).then(res=>{
                    console.log(res)
                    this.classifyTableData=this.getClassifyData()
                }).catch(err=>{
                    console.log(err)
                })
            },
            addDish(){
                this.dialogFormVisible = true;

            },
            ...mapActions(['selectClassifyData']),
            select(){
                this.dialogTableVisible = true
                //this.$store.dispatch('selectData',[this.selectValue,this.selectInput])
                this.selectClassifyData([this.selectValue,this.selectInput]).then(res=>{
                    console.log(res)
                    this.myselect=res
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(row.id);
                this.$store.dispatch('deleteClassifyData',row)
            },
        },
        computed:{

        }
    }
</script>

<style scoped lang="less">
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    /*border: 1px solid rebeccapurple;*/
    background: rgba(255, 255, 255, 0);
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

</style>
